<!DOCTYPE html>
<HTML>
<HEAD><meta name="viewport" content="width=device-width, initial-scale=1">
<Title>Multi Radar Chart</Title>
<link type='text/css' rel='Stylesheet' href="maxchartapi.css" />
</HEAD>
<body bgcolor="#FFFFFF" text="#000000" topmargin="0" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0">

<p class="heading0">ChartDirector 7.0 (Java Edition)</p>
<p class="heading1">Multi Radar Chart</p>
<hr class="separator">
<div class="content">
<img src="images/multiradar.png" width='480' height='380'>
<br><br>
This example demonstrates a radar chart with two layers and a number of chart formatting effects.<br><br>
<ul><li> Create a <a href="PolarChart.htm">PolarChart</a> object using <a href="PolarChart.PolarChart.htm">PolarChart.PolarChart</a>, using a golden color created with <a href="Chart.goldColor.htm">Chart.goldColor</a> as the background color.<br><br>
<li> Add a title to the chart with white text on a deep blue background using <a href="BaseChart.addTitle.htm">BaseChart.addTitle</a>.<br><br>
<li> Specify the polar plot area of the chart using <a href="PolarChart.setPlotArea.htm">PolarChart.setPlotArea</a>.<br><br>
<li> Add a legend box to the chart using <a href="BaseChart.addLegend.htm">BaseChart.addLegend</a>. Set the legend box background to silver with 3D border effect using <a href="Box.setBackground.htm">Box.setBackground</a>. The silver color is created using <a href="Chart.silverColor.htm">Chart.silverColor</a>.<br><br>
<li> Add two polar area layers using <a href="PolarChart.addAreaLayer.htm">PolarChart.addAreaLayer</a>. Use semi-transparent colors as the area fill colors to avoid the top layer blocking the bottom layer.<br><br>
<li> Add two polar line layers with <a href="PolarChart.addLineLayer.htm">PolarChart.addLineLayer</a>, using the same data as the polar area layer. Set a thick line width using <a href="PolarLayer.setLineWidth.htm">PolarLayer.setLineWidth</a>. The line layers becomes borders of the area layers to highlight the areas.<br><br>
<li> Specify the labels on the angular axis using <a href="AngularAxis.setLabels.htm">AngularAxis.setLabels</a>.<br><br>
<li> Assign the chart to the WebChartViewer using <a href="WebChartViewer.setChart.htm">WebChartViewer.setChart</a>, and insert it to the web page using <a href="WebChartViewer.renderHTML.htm">WebChartViewer.renderHTML</a>.<br><br>
<li> Generate tool tips for the chart using <a href="BaseChart.getHTMLImageMap.htm">BaseChart.getHTMLImageMap</a>.</ul>
</div>
<p class="heading1a">Source Code Listing</p>
<div class="content">
<b>[JSP Version]</b> jspdemo/multiradar.jsp
<div class='codeblock'><code class='pre'>&lt;%@page import="ChartDirector.*, java.util.*" %&gt;
&lt;%
// The data for the chart
double[] data0 = {90, 60, 85, 75, 55};
double[] data1 = {60, 80, 70, 80, 85};

// The labels for the chart
String[] labels = {"Speed", "Reliability", "Comfort", "Safety", "Efficiency"};

// Create a PolarChart object of size 480 x 380 pixels. Set background color to gold, with 1 pixel
// 3D border effect
PolarChart c = new PolarChart(480, 380, Chart.goldColor(), 0x000000, 1);

// Add a title to the chart using 15pt Times Bold Italic font. The title text is white (ffffff) on a
// deep blue (000080) background
c.addTitle("Space Travel Vehicles Compared", "Times New Roman Bold Italic", 15, 0xffffff
    ).setBackground(0x000080);

// Set plot area center at (240, 210), with 150 pixels radius, and a white (ffffff) background.
c.setPlotArea(240, 210, 150, 0xffffff);

// Add a legend box at top right corner (470, 35) using 10pt Arial Bold font. Set the background to
// silver, with 1 pixel 3D border effect.
LegendBox b = c.addLegend(470, 35, true, "Arial Bold", 10);
b.setAlignment(Chart.TopRight);
b.setBackground(Chart.silverColor(), Chart.Transparent, 1);

// Add an area layer to the chart using semi-transparent blue (0x806666cc). Add a blue (0x6666cc)
// line layer using the same data with 3 pixel line width to highlight the border of the area.
c.addAreaLayer(data0, 0x806666cc, "Model Saturn");
c.addLineLayer(data0, 0x6666cc).setLineWidth(3);

// Add an area layer to the chart using semi-transparent red (0x80cc6666). Add a red (0xcc6666) line
// layer using the same data with 3 pixel line width to highlight the border of the area.
c.addAreaLayer(data1, 0x80cc6666, "Model Jupiter");
c.addLineLayer(data1, 0xcc6666).setLineWidth(3);

// Set the labels to the angular axis as spokes.
c.angularAxis().setLabels(labels);

// Output the chart
WebChartViewer viewer = new WebChartViewer(request, "chart1");
viewer.setChart(c, Chart.SVG);

// Include tool tip for the chart
viewer.setImageMap(c.getHTMLImageMap("", "", "title='[{dataSetName}] {label}: score = {value}'"));
%&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Multi Radar Chart&lt;/title&gt;
    &lt;!-- Include ChartDirector Javascript Library to support chart interactions --&gt;
    &lt;script type="text/javascript" src="cdjcv.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body style="margin:5px 0px 0px 5px"&gt;
    &lt;div style="font:bold 18pt verdana;"&gt;
        Multi Radar Chart
    &lt;/div&gt;
    &lt;hr style="border:solid 1px #000080; background:#000080" /&gt;
    &lt;div style="font:10pt verdana; margin-bottom:1.5em"&gt;
        &lt;a href="viewsource.jsp?file=&lt;%=request.getServletPath()%&gt;"&gt;View Source Code&lt;/a&gt;
    &lt;/div&gt;
    &lt;!-- ****** Here is the chart image ****** --&gt;
    &lt;%= viewer.renderHTML(response) %&gt;
&lt;/body&gt;
&lt;/html&gt;</code></div>
</div>
<br><hr class="separator"><div class="copyright">&copy; 2022 Advanced Software Engineering Limited. All rights reserved.</div>
</body>
</HTML>
